<template>
  <div id="app">
    <nav v-show="flg">
      <router-link to="/">
        <div class="ico" @click="ck(0,$event)"><span>职位</span></div>
      </router-link>
      <router-link to="/you">
        <div class="ico" @click="ck(1,$event)"><span>有了</span></div>
      </router-link> 
      <router-link to="/message">
        <div class="ico" @click="ck(2,$event)"><span>消息</span></div>
      </router-link>
      <router-link to="/my">
        <div class="ico"  @click="ck(3,$event)"><span>我的</span></div>
      </router-link>

    </nav>
    <router-view/>
  </div>
</template>
<script>

export default {
  data(){

    return {
      position: ["29px 0px","0 -27px","0 -55px","2px -83px"],
      position1:["0 0px","29px -28px","29px -55px","31px -83px"],
      data:[],
    }
  },
  methods:{
    ck(i,ev){
      // console.log(i,ev.target);
      let div = ev.target;
      let divArr = document.querySelectorAll(".ico");
      divArr.forEach((el,index) => {
        // console.log(el);
        el.style.backgroundPosition = this.position[index]
      });
      div.style.backgroundPosition = this.position1[i];
    },
  },
  computed:{
    flg(){
      return this.$store.getters.flg
    }
  },
  created() {
    
  }
}
</script>
<style lang="scss">

$url:'job/icon.png';

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
}

#app {
  width: 100vw;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
$imgArr:0 0px,0 -27px,0 -55px,2px -83px;
nav {
  padding-bottom: 20px;
  width: 100vw;
  position: fixed;
  bottom: 0;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-around;
  z-index: 999;
  box-shadow: 1px 0 0px 1px rgb(241, 241, 241);
  a{
    color: #6E6E6E;
    font: 400 12px/330% "";
    div{
      margin-top: 8px;
      width: 29px;
      height: 27px;
      // border: 1px solid red;
      text-align: center;
      background: url($URL+$url) ;
      background-size: 200%;
      span{
        position: relative;
        top: 16px;
      }
    } 
  }
  @each $item in $imgArr {
      $index: index($imgArr,$item);
      a:nth-child(#{$index}) div{
        background-position: $item;
      }
    }
}
</style>
